<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: common(${sysMenu.name})">
</head>
<!-- Content Header (Page header) -->
<div th:replace="contentHeader"></div>
<!-- Main content -->
<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box">
				<div class="box-header">
					<h3 class="box-title">条件搜索</h3>
				</div>
				<!-- /.box-header -->
				<!-- form start -->
				<form class="form-inline">
					<div class="box-body">
						<div class="form-group">
							<label>父级 </label> <select id="searchPcode" class="form-control">
							</select>
						</div>
						<div class="form-group">
							<label>名称 </label><input type="text" id="searchName"
								class="form-control" placeholder="名称">
						</div>
					</div>
					<!-- /.box-body -->
					<div th:replace="boxFooter"></div>
					<!-- /.box-footer -->
				</form>
				<div class="box-body">
					<table id="dictTable"></table>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /.box -->

		</div>
		<!-- /.col -->
	</div>
	<!-- /.row -->

	<div id="addDictDiv" class="box" style="display: none">
		<!-- form start -->
		<form action="/sys/dict/addDict">
			<div class="box-body">
				<div class="form-group">
					<label>父级 </label><select id="addPcode" name="pcode"
						class="form-control">
					</select>
				</div>
				<div class="form-group">
					<label>编码 </label><input type="text" name="code"
						class="form-control" placeholder="编码">
				</div>
				<div class="form-group">
					<label>名称 </label><input type="text" name="name"
						class="form-control" placeholder="名称">
				</div>
				<div class="form-group">
					<label>序号 </label><input type="number" name="num"
						class="form-control" placeholder="序号">
				</div>
				<div class="form-group">
					<label>图标 </label><input type="text" name="icon"
						class="form-control" placeholder="图标">
				</div>
				<div class="form-group">
					<label>小贴士 </label><input type="text" name="tips"
						class="form-control" placeholder="小贴士">
				</div>
			</div>
			<!-- /.box-body -->
			<div class="box-footer">
				<div class="pull-right">
					<button type="submit" class="btn btn-success">
						<i class="fa fa-floppy-o" aria-hidden="true"></i> 保存
					</button>
				</div>
			</div>
			<!-- /.box-footer -->
		</form>
	</div>

	<div id="editDictDiv" class="box" style="display: none">
		<!-- form start -->
		<form action="/sys/dict/editDict">
			<div class="box-body">
				<input type="hidden" id="editId" name="id"> <input
					type="hidden" id="editPcodes" name="pcode">
				<div class="form-group">
					<label>父级 </label><select id="editPcode" class="form-control"
						disabled>
					</select>
				</div>
				<div class="form-group">
					<label>编码 </label><input type="text" id="editCode" name="code"
						class="form-control" placeholder="编码">
				</div>
				<div class="form-group">
					<label>名称 </label><input type="text" id="editName" name="name"
						class="form-control" placeholder="名称">
				</div>
				<div class="form-group">
					<label>序号 </label><input type="number" id="editNum" name="num"
						class="form-control" placeholder="序号">
				</div>
				<div class="form-group">
					<label>图标 </label><input type="text" id="editIcon" name="icon"
						class="form-control" placeholder="图标">
				</div>
				<div id="editTipsDiv" class="form-group" style="display: none">
					<label>小贴士 </label><input type="text" id="editTips" name="tips"
						class="form-control" placeholder="小贴士">
				</div>
			</div>
			<!-- /.box-body -->
			<div class="box-footer">
				<div class="pull-right">
					<button type="submit" class="btn btn-success">
						<i class="fa fa-floppy-o" aria-hidden="true"></i> 保存
					</button>
				</div>
			</div>
			<!-- /.box-footer -->
		</form>
	</div>
</section>
<script type="text/javascript">
	var getPdict = function() {
		$.ajax({
			type : 'get',
			url : '/sys/dict/selectList',
			data : {
				pcode : 'top-level'
			},
			success : function(result) {
				var searchOptions = '<option value="">全部</option>';
				var options = '<option value="top-level">顶级</option>';
				if (result != null && result.data != null) {
					$.each(result.data, function(index, element) {
						options += '<option value="'+element.code+'">' + element.name + '</option>';
					});
				}
				$('#searchPcode').empty();
				$('#searchPcode').append(searchOptions + options);
				$('#addPcode').empty();
				$('#addPcode').append(options);
				$('#editPcode').empty();
				$('#editPcode').append(options);
			}
		});
	}

	var refresh = function() {
		layer.load();
		$('#dictTable').bootstrapTable('refresh', {
			url : '/sys/dict/selectPage'
		});
	}

	var queryParams = function(params) {
		params.pcode = $('#searchPcode').val();
		params.name = $('#searchName').val();
		return params;
	}

	var bootstrapTable = function() {
		$('#dictTable').bootstrapTable({
			columns : [ {
				checkbox : true
			}, {
				field : 'code',
				title : '编码',
				width : 200,
				sortable : true
			}, {
				field : 'name',
				title : '名称',
				sortable : true
			}, {
				field : 'pcode',
				title : '父编码',
				width : 200,
				sortable : true
			}, {
				field : 'pname',
				title : '父名称'
			}, {
				field : 'num',
				title : '序号',
				width : 50,
				sortable : true
			}, {
				field : 'tips',
				title : '小贴士',
				width : 300,
				sortable : true
			}, {
				field : 'icon',
				title : '图标',
				width : 300,
				sortable : true,
				formatter : function(value, row, index) {
					if (value != null && value != '') {
						return '<i class="fa '+value+'" aria-hidden="true"></i> ' + value;
					}
					return value;
				}
			} ],
			uniqueId : 'id',
			idField : 'id',
			striped : true,
			clickToSelect : true,
			sidePagination : 'server',
			pagination : true,
			queryParamsType : '',
			pageNumber : 1,
			pageSize : 10,
			pageList : [ 10, 50, 250, 500, 1000 ],
			queryParams : queryParams,
			responseHandler : function(result) {
				layer.closeAll();
				result.rows = result.data.records;
				result.total = result.data.total;
				return result;
			}
		});
	}

	$(function() {
		$('input').iCheck({
			checkboxClass : 'icheckbox_square-blue',
			radioClass : 'iradio_square-blue',
			increaseArea : '20%' /* optional */
		});

		getPdict();

		bootstrapTable();

		$('#dict_search').on('click', function() {
			refresh();
		});

		$('#dict_add').on('click', function() {
			var id = 'addDictDiv';
			layer.open({
				type : 1,
				title : $(this).html(),
				content : $('#' + id),
				cancel : function() {
					//右上角关闭回调
					empty(id);
					//return false 开启该代码可禁止点击该按钮关闭
				}
			});
		});

		$('#addDictDiv form').bootstrapValidator({
			message : '这个值是无效的',
			feedbackIcons : {
				valid : 'fa fa-check',
				invalid : 'fa fa-remove',
				validating : 'fa fa-refresh'
			},
			fields : {
				pcode : {
					validators : {
						notEmpty : {}
					}
				},
				code : {
					validators : {
						notEmpty : {}
					}
				},
				name : {
					validators : {
						notEmpty : {}
					}
				},
				num : {
					validators : {
						notEmpty : {}
					}
				}
			}
		}).on('success.form.bv', function(e) {
			// Prevent form submission
			e.preventDefault();

			// Get the form instance
			var $form = $(e.target);

			// Get the BootstrapValidator instance
			var bv = $form.data('bootstrapValidator');

			layer.confirm('确定保存？', {
				icon : 3,
				title : '提示'
			}, function(index) {
				// Use Ajax to submit form data
				$.post($form.attr('action'), $form.serialize(), function(result) {
					if (result.success) {
						layer.msg(result.msg, {
							icon : 6
						});
						empty('addDictDiv');
						getPdict();
						refresh();
					} else {
						layer.msg(result.errorMsg, {
							icon : 5
						});
					}
				}, 'json');
			});
		});

		$('#dict_edit').on('click', function() {
			var selections = $('#dictTable').bootstrapTable('getSelections');
			if (selections == null || selections.length == 0) {
				layer.msg('请选择一项纪录', {
					icon : 5
				});
				return;
			}
			if (selections.length > 1) {
				layer.msg('只能选择一项纪录', {
					icon : 5
				});
				return;
			}
			var id = 'editDictDiv';
			layer.open({
				type : 1,
				title : $(this).html(),
				content : $('#' + id),
				success : function(layero, index) {
					$('#editId').val(selections[0].id);
					$('#editPcode').val(selections[0].pcode);
					$('#editPcodes').val(selections[0].pcode);
					$('#editCode').val(selections[0].code);
					$('#editName').val(selections[0].name);
					$('#editIcon').val(selections[0].icon);
					$('#editNum').val(selections[0].num);
					$('#editTips').val(selections[0].tips);
				},
				cancel : function() {
					//右上角关闭回调
					empty(id);
					//return false 开启该代码可禁止点击该按钮关闭
				}
			});
		});

		$('#editDictDiv form').bootstrapValidator({
			message : '这个值是无效的',
			feedbackIcons : {
				valid : 'fa fa-check',
				invalid : 'fa fa-remove',
				validating : 'fa fa-refresh'
			},
			fields : {
				code : {
					validators : {
						notEmpty : {}
					}
				},
				name : {
					validators : {
						notEmpty : {}
					}
				},
				num : {
					validators : {
						notEmpty : {}
					}
				}
			}
		}).on('success.form.bv', function(e) {
			// Prevent form submission
			e.preventDefault();

			// Get the form instance
			var $form = $(e.target);

			// Get the BootstrapValidator instance
			var bv = $form.data('bootstrapValidator');

			layer.confirm('确定保存？', {
				icon : 3,
				title : '提示'
			}, function(index) {
				// Use Ajax to submit form data
				$.post($form.attr('action'), $form.serialize(), function(result) {
					if (result.success) {
						layer.msg(result.msg, {
							icon : 6
						});
						empty('editDictDiv');
						getPdict();
						refresh();
					} else {
						layer.msg(result.errorMsg, {
							icon : 5
						});
					}
				}, 'json');
			});
		});

		$('#dict_delete').on('click', function() {
			var selections = $('#dictTable').bootstrapTable('getSelections');
			if (selections == null || selections.length == 0) {
				layer.msg('请选择一项纪录', {
					icon : 5
				});
				return;
			}
			var ids = new Array();
			$.each(selections, function(index, element) {
				ids.push(element.id);
			});
			layer.confirm('确定删除？', {
				icon : 3,
				title : '提示'
			}, function(index) {
				$.ajax({
					type : 'post',
					url : '/sys/dict/deleteDict',
					data : {
						ids : ids.join(',')
					},
					success : function(result) {
						if (result.success) {
							layer.msg(result.msg, {
								icon : 6
							});
							getPdict();
							refresh();
						} else {
							layer.msg(result.errorMsg, {
								icon : 5
							});
						}
					}
				});
			});
		});
	});
</script>
</html>